Fractionnement du Code Frontend : Approches Basées sur les Routes et les Composants

// App.js
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./components/Home'));
const About = lazy(() => import('./components/About'));

function App() {
 return (
 
 Loading...

Dans cet exemple, les composants Home et About sont chargés paresseusement (lazy loading) à l'aide de React.lazy() et d'importations dynamiques. Le composant Suspense fournit une interface utilisateur de repli pendant le chargement des composants. React Router gère la navigation et s'assure que le bon composant est affiché en fonction de la route actuelle.

Exemple (Angular)

Dans Angular, le fractionnement de code basé sur les routes est réalisé à l'aide de modules chargés paresseusement (lazy-loaded modules).

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
 { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

Ici, la propriété loadChildren dans la configuration de la route spécifie le chemin vers le module qui doit être chargé paresseusement. Le routeur d'Angular chargera automatiquement le module et ses composants associés uniquement lorsque l'utilisateur naviguera vers la route correspondante.

Exemple (Vue.js)

Vue.js prend également en charge le fractionnement de code basé sur les routes en utilisant des importations dynamiques dans la configuration du routeur.

// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
 { path: '/', component: () => import('./components/Home.vue') },
 { path: '/about', component: () => import('./components/About.vue') }
];

const router = new VueRouter({
 routes
});

export default router;

L'option component dans la configuration de la route utilise une importation dynamique pour charger le composant de manière asynchrone. Vue Router se chargera du chargement et de l'affichage du composant lorsque la route sera consultée.

Avantages du Fractionnement de Code Basé sur les Routes

• Simple à mettre en œuvre : Le fractionnement de code basé sur les routes est relativement simple à implémenter, surtout avec le support fourni par les frameworks modernes.
• Séparation claire des préoccupations : Chaque route représente une section distincte de l'application, ce qui facilite le raisonnement sur le code et ses dépendances.
• Efficace pour les grandes applications : Le fractionnement de code basé sur les routes est particulièrement bénéfique pour les grandes applications avec de nombreuses routes et fonctionnalités.

Inconvénients du Fractionnement de Code Basé sur les Routes

• Peut ne pas être assez granulaire : Le fractionnement de code basé sur les routes peut ne pas être suffisant pour les applications avec des composants complexes partagés entre plusieurs routes.
• Le temps de chargement initial peut rester élevé : Si une route contient de nombreuses dépendances, le temps de chargement initial pour cette route peut encore être significatif.

Fractionnement de Code Basé sur les Composants

Le fractionnement de code basé sur les composants va encore plus loin en divisant le code de l'application en morceaux plus petits basés sur des composants individuels. Cette approche permet un contrôle plus granulaire sur le chargement du code et peut être particulièrement efficace pour les applications avec des interfaces utilisateur complexes et des composants réutilisables.

Mise en œuvre

Le fractionnement de code basé sur les composants repose également sur les importations dynamiques, mais au lieu de charger des routes entières, des composants individuels sont chargés à la demande. Cela peut être réalisé à l'aide de techniques telles que :

1. Chargement paresseux des composants : Utiliser les importations dynamiques pour ne charger les composants que lorsqu'ils sont nécessaires, par exemple lorsqu'ils sont affichés pour la première fois ou lorsqu'un événement spécifique se produit.
2. Rendu conditionnel : Afficher les composants de manière conditionnelle en fonction de l'interaction de l'utilisateur ou d'autres facteurs, en ne chargeant le code du composant que lorsque la condition est remplie.
3. API Intersection Observer : Utiliser l'API Intersection Observer pour détecter quand un composant est visible dans la fenêtre d'affichage (viewport) et charger son code en conséquence. C'est particulièrement utile pour charger des composants qui sont initialement hors de l'écran.

Exemple (React)

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
 return (
 

 Loading...
}>